import React, { useCallback } from 'react';
import { connect } from 'umi';
import { Button } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import OrganizationSelect from '@/components/OrganizationSelect';

import BaseSettingProvider from '@/pages/SalaryManage/components/BaseSettingProvider';
import SalaryConfigTipPage from '@/pages/SalaryManage/components/SalaryConfigTipPage';
import { goToSkillsDevelopmentTaxLog } from '@/pages/SalaryManage/utils/pageNavigateUtil';
import InsuranceFundFileMenuFilter from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/components/InsuranceFundFileMenuFilter';
import InsuranceFundFileRouter from '@/pages/SalaryManage/SalaryCalculate/InsuranceFundFile/components/InsuranceFundFileRouter';
import salaryStyle from '@/pages/SalaryManage/salaryManage.less';

import SkillsDevelopmentTax from './SkillsDevelopmentTax';

const Page = ({ selectOrganizationCode, dispatch, organizationResponse, form }) => {
    const handleOrganizationChange = useCallback(
        value => {
            if (selectOrganizationCode !== value) {
                dispatch({
                    type: 'insuranceFundFileModel/setMultiStore',
                    payload: {
                        selectOrganizationCode: value,
                        countryNameCode: null
                    }
                });
            }
        },
        [selectOrganizationCode]
    );
    return (
        <PageHeaderWrapper type="success">
            <BaseSettingProvider organizationCode={selectOrganizationCode}>
                <InsuranceFundFileMenuFilter>
                    <InsuranceFundFileRouter
                        type="insuranceFundFile"
                        extraButton={
                            <div style={{ display: 'flex', lineHeight: '31px' }}>
                                <div style={{ display: 'flex', marginRight: '12px' }}>
                                    <OrganizationSelect
                                        isStrictly
                                        isNeedPermission
                                        style={{ width: 220 }}
                                        onChange={handleOrganizationChange}
                                        value={selectOrganizationCode}
                                        allowClear={false}
                                        dropdownMatchSelectWidth
                                        treeDataFromProp
                                        treeDataList={organizationResponse}
                                    />
                                </div>
                                <Button onClick={() => goToSkillsDevelopmentTaxLog(selectOrganizationCode)}>
                                    操作日志
                                </Button>
                            </div>
                        }
                    >
                        <SalaryConfigTipPage organizationCode={selectOrganizationCode}>
                            <div className={salaryStyle.salaryWrapper}>
                                <SkillsDevelopmentTax organizationCode={selectOrganizationCode} form={form} />
                            </div>
                        </SalaryConfigTipPage>
                    </InsuranceFundFileRouter>
                </InsuranceFundFileMenuFilter>
            </BaseSettingProvider>
        </PageHeaderWrapper>
    );
};

export default connect(({ insuranceFundFileModel }) => ({
    selectOrganizationCode: insuranceFundFileModel.selectOrganizationCode,
    organizationResponse: insuranceFundFileModel.organizationResponse
}))(Page);
